import 'package:cher_flare/config/url_api.dart';
import 'package:cher_flare/http/http_utils.dart';
import 'package:cher_flare/modules/home_page/views/ly_medal_buy_result_page.dart';
import 'package:cher_flare/routes/app_pages.dart';
import 'package:cher_flare/utils/app_color.dart';
import 'package:cher_flare/utils/ly_medal_manager.dart';
import 'package:flutter/material.dart';
import 'package:flutter_easyloading/flutter_easyloading.dart';
import 'package:get/get.dart';

class LYMedalBuyPage extends StatefulWidget {
  final LYMedalType type;
  const LYMedalBuyPage({super.key, required this.type});

  @override
  State<LYMedalBuyPage> createState() => _LYMedalBuyPageState();
}

class _LYMedalBuyPageState extends State<LYMedalBuyPage> {
  void _buyButtonDidClick() async {
    EasyLoading.show();
    final response = await HttpUtils.getInstance
        .post(URLApi.reviewModeConsume, data: {"outlay": 49, "source": "iap"});
    EasyLoading.dismiss();
    if (response.isSuccess) {
      LYHomeDataManager.share.updateUnlockType(widget.type);
      Get.back();
      Get.dialog(LYMedalBuyResultPage(type: widget.type),
          useSafeArea: false, barrierDismissible: false);
    } else {
      EasyLoading.showToast(response.error?.msg ?? '');
      Future.delayed(const Duration(seconds: 2)).then((value) {
        Get.close(0);
        Get.toNamed(AppPages.coinShopPage);
      });
    }
  }

  @override
  Widget build(BuildContext context) {
    return Column(
      mainAxisAlignment: MainAxisAlignment.center,
      crossAxisAlignment: CrossAxisAlignment.center,
      children: [
        _makeContentWidget(),
        const SizedBox(
          height: 24,
        ),
        InkWell(
          onTap: () {
            Get.close(0);
          },
          child: Image.asset(
            'assets/images/medal_buy_close_icon.png',
            width: 30,
            height: 30,
          ),
        )
      ],
    );
  }

  Widget _makeContentWidget() {
    return Stack(
      alignment: Alignment.center,
      fit: StackFit.loose,
      children: [
        SizedBox(
          child: Container(
            margin: const EdgeInsets.only(left: 30, right: 30, top: 10),
            decoration: BoxDecoration(
                color: AppColors.whiteColor,
                borderRadius: BorderRadius.circular(16),
                gradient: const LinearGradient(
                    colors: [Color(0xfff4ffe9), Color(0xfff6f7f8)])),
            child: Column(
              mainAxisAlignment: MainAxisAlignment.start,
              crossAxisAlignment: CrossAxisAlignment.center,
              mainAxisSize: MainAxisSize.min,
              children: [
                Container(
                    alignment: Alignment.center,
                    padding: const EdgeInsets.only(top: 45),
                    child: Image.asset(
                      'assets/images/${_imageName()}',
                      width: 80,
                      height: 80,
                    )),
                Container(
                  alignment: Alignment.center,
                  padding: const EdgeInsets.only(top: 17, left: 28, right: 28),
                  child: const Text(
                    'Unlock the even cooler advanced silver badge.',
                    maxLines: 2,
                    textAlign: TextAlign.center,
                    style: TextStyle(
                        fontSize: 14,
                        fontWeight: FontWeight.bold,
                        color: AppColors.color404040),
                  ),
                ),
                Container(
                  alignment: Alignment.center,
                  padding: const EdgeInsets.only(top: 10, bottom: 16),
                  child: Row(
                    mainAxisAlignment: MainAxisAlignment.center,
                    crossAxisAlignment: CrossAxisAlignment.center,
                    children: [
                      Image.asset(
                        'assets/images/cher_flare_coin_50_icon.png',
                        width: 18,
                        height: 18,
                      ),
                      const SizedBox(
                        width: 10,
                      ),
                      const Text(
                        '49',
                        style: TextStyle(
                            color: AppColors.color565656,
                            fontWeight: FontWeight.bold,
                            fontSize: 14),
                      )
                    ],
                  ),
                ),
                Container(
                  height: 100,
                  width: double.infinity,
                  padding: const EdgeInsets.only(bottom: 16),
                  alignment: Alignment.bottomCenter,
                  decoration: const BoxDecoration(
                      image: DecorationImage(
                          image: AssetImage('assets/images/buy_bg_img.png'),
                          fit: BoxFit.fill)),
                  child: InkWell(
                    onTap: () => _buyButtonDidClick(),
                    child: Container(
                      width: 117,
                      height: 38,
                      alignment: Alignment.center,
                      decoration: const BoxDecoration(
                          image: DecorationImage(
                              image: AssetImage(
                                  'assets/images/buy_btn_bg_icon.png'),
                              fit: BoxFit.cover)),
                      child: const Text(
                        'Buy',
                        style: TextStyle(
                            fontWeight: FontWeight.bold,
                            color: AppColors.color202020,
                            fontSize: 14),
                      ),
                    ),
                  ),
                ),
              ],
            ),
          ),
        ),
        Positioned(
            top: 0,
            child: Image.asset(
              'assets/images/medal_buy_header_img.png',
              width: 163,
              height: 36,
            ))
      ],
    );
  }

  String _imageName() {
    if (widget.type == LYMedalType.germination) {
      return "onset_oath _badge_right.png";
    } else if (widget.type == LYMedalType.seedlingStage) {
      return "steadfast_streak_crest_r.png";
    } else if (widget.type == LYMedalType.saplingStage) {
      return "persistent_pledge_medallion_r.png";
    }
    return "triumphant_commitment_emblem_r.png";
  }
}
